<template>
  <div>
    <!--
      必传
        action 指向上传地址, 但是后面我们会用自定义在线云服务进行处理, 这里给个 # 即可
      样式相关
      显示相关
        fileList 文件列表数组, 内包对象, 对象中有 url 属性的话就会显示图片 (后续使用重点)
        list-type 指定显示样式, 输入 picture-cart
        class 动态类名, 控制是否显示上传图标 (配合 css 实现)
     -->
    <!-- action 本身是假的, 不能用来上传, 这里需要自定义一个上传函数 http-request 属性, 替换 action 地址 -->
    <!-- 图片处理钩子
        on-remove 传入删除图片时触发的函数, 默认可以得到删除的图片本身, 最新的fileList 列表值
        on-change 文件添加时的钩子, 也是用来处理 fileList 没有及时更新的问题
      上传相关
        http-request 可以自定义上传方法, 替换 action 的动作 -->
    <el-upload
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :class="{disable: fileList.length >= 1}"
      :on-remove="onRemove"
      :on-change="onChange"
      :http-request="upload"
    >
      <!-- 没有图片时显示的占位 -->
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 文件列表数组, 里面的对象有 url 的都会显示
      fileList: [
        { url: 'https://img2.woyaogexing.com/2019/10/15/ae7b42849b264b7d87ac622891932e6d!400x400.jpeg' }
      ]
    }
  },
  // fileList 需要在触发钩子时手动更新
  methods: {
    onRemove(file, newFileList) {
      // 每当图片被移除, 这个钩子触发
      // 得到文静本体 和 删除后最新的文件列表
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    // onChange() {
    //   console.log(11)
    // },
    upload() {
      console.log('自定义上传函数')
    }
  }
}
</script>

<style lang="scss" scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
